<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      lang="en-us"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

    <title> 新闻后台管理 </title>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen"
          href="../../static/css/bootstrap.min.css"
          th:href="@{/resources/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="../../static/css/font-awesome.min.css"
          th:href="@{/resources/css/font-awesome.min.css}"/>

    <!-- SmartAdmin Styles : Caution! DO NOT change the order -->
    <link rel="stylesheet" type="text/css" media="screen"
          href="../../static/css/smartadmin-production-plugins.min.css"
          th:href="@{/resources/css/smartadmin-production-plugins.min.css}"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="../../static/css/smartadmin-production.min.css"
          th:href="@{/resources/css/smartadmin-production.min.css}"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="../../static/css/smartadmin-skins.min.css"
          th:href="@{/resources/css/smartadmin-skins.min.css}"/>

    <!-- SmartAdmin RTL Support -->
    <link rel="stylesheet" type="text/css" media="screen"
          href="../../static/css/smartadmin-rtl.min.css"
          th:href="@{/resources/css/smartadmin-rtl.min.css}"/>

    <!-- FAVICONS -->
    <link rel="shortcut icon" href="../../static/img/favicon/favicon.ico" type="image/x-icon"
          th:href="@{/resources/img/favicon/favicon.ico}"/>
    <link rel="icon" href="../../static/img/favicon/favicon.ico" type="image/x-icon"
          th:href="@{/resources/img/favicon/favicon.ico}"/>

</head>

<body class="">

<!-- HEADER -->
<header id="header">
    <div id="logo-group">


        <!-- PLACE YOUR LOGO HERE -->
        <span id="logo"><a th:href="@{/}"> <img th:src="@{/resources/img/logo.png}" alt="logo"/></a></span>
        <!-- END LOGO PLACEHOLDER -->

    </div>

    <!-- pulled right: nav area -->
    <div class="pull-right">

        <!-- collapse menu button -->
        <div id="hide-menu" class="btn-header pull-right">
            <span> <a href="javascript:void(0);" data-action="toggleMenu" title="Collapse Menu"><i
                    class="fa fa-reorder">隐藏</i></a> </span>
        </div>
        <!-- end collapse menu -->

        <!-- logout button -->
        <div id="logout" class="btn-header transparent pull-right">
            <span> <a th:href="@{/logout}" title="登出" data-action="userLogout" data-logout-msg="您确定要退出登录吗?"><i
                    class="fa fa-sign-out">退出</i></a> </span>
        </div>
        <!-- end logout button -->

        <!-- fullscreen button -->
        <div id="fullscreen" class="btn-header transparent pull-right">
            <span> <a href="javascript:void(0);" data-action="launchFullscreen" title="全屏"><i class="fa fa-arrows-alt">全屏</i></a> </span>
        </div>
        <!-- end fullscreen button -->
        <!-- home button -->
        <div id="home" class="btn-header transparent pull-right">
            <span> <a th:href="@{/}" title="回到首页"><i class="fa fa-home">首页</i></a> </span>
        </div>
        <!-- end home button -->

    </div>
    <!-- end pulled right: nav area -->

</header>
<!-- END HEADER -->
<!-- Left panel : Navigation area -->
<aside id="left-panel">
    <nav>
        <ul>
            <li>
                <a th:href="@{/}">
                    <i class="fa fa-lg fa-book"></i>
                    <span class="menu-item-parent fa-lg">首页</span>
                </a>
            </li>
            <li class="active">
                <a href="javascript:">
                    <i class="fa fa-lg fa-book"></i>
                    <span class="menu-item-parent fa-lg">频道管理</span>
                </a>
                <ul>
                    <li>
                        <a th:href="@{/channel/setting}">
                            <i class="fa fa-lg fa-edit"></i>
                            <span class="menu-item-parent fa-lg">频道管理</span>
                        </a>
                    </li>
                    <hr>
                    <li th:each="channel : ${channels}"
                        th:attrappend="data-channel-id=${channel.channel_id}"
                        th:classappend="${ch.channel_id==channel.channel_id}?'active':''" class="channelLi">
                        <a href="javascript:">
                            <i class="fa fa-lg fa-edit"></i>
                            <span class="menu-item-parent fa-lg" th:text="${channel.title}">频道</span>
                        </a>
                    </li>

                </ul>
            </li>
            <li>
                <a th:href="@{/article/list}">
                    <i class="fa fa-lg fa-book"></i>
                    <span class="menu-item-parent fa-lg">新闻管理</span>
                </a>
            </li>
            <!--<li>-->
            <!--<a href="javascript:">-->
            <!--<i class="fa fa-lg fa-book"></i>-->
            <!--<span class="menu-item-parent fa-lg">其他</span>-->
            <!--</a>-->
            <!--<ul>-->
            <!--<li>-->
            <!--<a th:href="@{/image/list}">-->
            <!--<i class="fa fa-lg fa-edit"></i>-->
            <!--<span class="menu-item-parent fa-lg">图片资源</span>-->
            <!--</a>-->
            <!--</li>-->
            <!--</ul>-->
            <!--</li>-->
        </ul>
    </nav>
</aside>
<!-- END NAVIGATION -->
<!-- MAIN PANEL -->
<div id="main" role="main">

    <!-- RIBBON -->
    <div id="ribbon">

        <!-- 刷新页面 -->

        <!-- breadcrumb -->
        <ol class="breadcrumb">
            <i class="fa fa-arrow-right"></i>
            <li class="fa fa-lg" th:text="'频道设置 - '+${ch.title}">频道设置</li>
        </ol>

    </div>
    <!-- END RIBBON -->

    <!-- MAIN CONTENT -->
    <div id="content">

        <!-- widget grid -->
        <section id="widget-grid" class="">

            <!-- row -->
            <div class="row">

                <article class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-6 col-lg-offset-3">

                    <!-- Widget ID (each widget will need unique ID)-->
                    <div class="jarviswidget jarviswidget-color-green" id="wid-id-0" data-widget-colorbutton="false"
                         data-widget-editbutton="false" data-widget-deletebutton="false"
                         data-widget-custombutton="false">

                        <header>
                            <span class="widget-icon"> <i class="fa fa-info-circle"></i></span>

                            <h2>基本信息</h2>

                        </header>

                        <!-- widget div-->
                        <div>

                            <!-- widget content -->
                            <div class="widget-body no-padding">

                                <form class="smart-form">
                                    <header>
                                        基本信息
                                    </header>

                                    <fieldset>
                                        <div class="row">
                                            <section class="col col-3">
                                                <label class="label font-lg">频道编号：</label>
                                                <label class="label font-xl" th:text="${ch.channel_id}">
                                                </label>
                                            </section>
                                            <section class="col col-3">
                                                <label class="label font-lg">频道名称：</label>
                                                <label class="label font-xl" th:text="${ch.title}">
                                                </label>
                                            </section>
                                            <section class="col col-3">
                                                <label class="label font-lg">频道类型：</label>
                                                <label class="label font-xl" th:text="${ch.type==10}?'首页':'普通频道'">
                                                </label>
                                            </section>
                                            <section class="col col-3">
                                                <label class="label font-lg">URL：</label>
                                                <label class="label font-xl" th:text="${ch.url}">
                                                </label>
                                            </section>
                                        </div>
                                    </fieldset>

                                    <footer>
                                        <!-- 刷新按钮 -->
                                        <button type="button" id="edit_info_btn" href="javascript:"
                                                class="btn btn-primary"
                                                data-toggle="modal"
                                                data-target="#editInfoModal">
                                            <i class="fa fa-edit"></i>
                                            编辑
                                        </button>
                                    </footer>

                                </form>

                            </div>
                            <!-- end widget content -->

                        </div>
                        <!-- end widget div -->

                    </div>
                    <!-- end widget -->

                </article>

                <!-- NEW WIDGET START -->
                <article class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-6 col-lg-offset-3">

                    <!-- Widget ID (each widget will need unique ID)-->
                    <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1" data-widget-colorbutton="false"
                         data-widget-deletebutton="false" data-widget-editbutton="false">
                        <header>
                            <span class="widget-icon"> <i class="fa fa-table"></i> </span>

                            <h2>栏目列表</h2>

                        </header>

                        <!-- widget div-->
                        <div>
                            <!-- widget content -->
                            <div class="widget-body">

                                <form class="smart-form">

                                    <header>栏目列表</header>

                                    <fieldset>
                                        <div class="table-responsive">
                                            <table class="table table-bordered ">
                                                <thead>
                                                <tr>
                                                    <th style="text-align:center;width:4%"><input type="checkbox"
                                                                                                  id="check_all"
                                                                                                  onclick="checkAllRows()"
                                                                                                  title="全选"/></th>
                                                    <th>顺序</th>
                                                    <th>栏目编号</th>
                                                    <th>栏目名称</th>
                                                    <th>栏目类型</th>
                                                    <th>URL</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr th:each="column : ${ch.columns}" th:id="'col'+${column.column_id}">
                                                    <th style="text-align: center;width:4%;">
                                                        <input type="checkbox" name="check_single_row"
                                                               onclick="cancelCheckAllStatus()"
                                                               th:value="${column.column_id}"/>
                                                    </th>
                                                    <td th:text="${column.sequence}"></td>
                                                    <td th:text="${column.column_id}"></td>
                                                    <td th:text="${column.title}"></td>
                                                    <td>
                                                        <label class="label state-disabled">
                                                            <select class="label" th:value="${column.type}"
                                                                    data-th-disabled="true">
                                                                <option value="10">普通栏目</option>
                                                            </select>
                                                        </label>
                                                    </td>
                                                    <td th:text="${column.url}"></td>
                                                    <td>
                                                        <label class="fa fa-edit edit-col-btn"
                                                               th:attr="data-column-id=${column.column_id}">编辑</label>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                    </fieldset>

                                    <footer>
                                        <!-- 添加按钮 -->
                                        <button type="button" type="button"
                                                href="javascript:" class="btn btn-info"
                                                data-toggle="modal"
                                                data-target="#addModal">
                                            <i class="fa fa-plus"></i>
                                            新增
                                        </button>
                                        <button type="button" id="delete_btn" type="button"
                                                href="javascript:" class="btn btn-danger">
                                            <i class="fa fa-trash-o"></i>
                                            删除
                                        </button>
                                        <!-- 刷新按钮 -->
                                        <button type="button" id="refresh_btn" type="button"
                                                href="javascript:" class="btn btn-success">
                                            <i class="fa fa-refresh"></i>
                                            刷新
                                        </button>
                                        <button class="btn btn-primary" type="button"
                                                href="javascript:" data-toggle="modal"
                                                data-target="#columnModal">
                                            <i class="fa fa-edit"></i>
                                            顺序
                                        </button>

                                    </footer>

                                </form>


                            </div>
                            <!-- end widget content -->

                        </div>
                        <!-- end widget div -->

                    </div>
                    <!-- end widget -->

                </article>
            </div>
            <!-- end row -->

        </section>
        <!-- end widget grid -->

        <!-- Modal -->
        <div class="modal fade" id="editInfoModal" tabindex="-1" role="dialog" aria-labelledby="editInfoModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="editInfoModalLabel"><i class="fa fa-edit"></i>编辑栏目信息</h4>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12 col-lg-8 col-lg-offset-2">
                                <form class="smart-form" id="editForm">
                                    <div class="row">
                                        <section class="col col-6">
                                            <label class="label font-lg">频道名称：</label>
                                            <input class="font-md" id="title" th:value="${ch.title}" name="title"/>
                                        </section>
                                        <section class="col col-6">
                                            <label class="label font-lg">频道类型：</label>
                                            <label class="select">
                                                <select class="input-lg" id="select_type"
                                                        th:attrappend="data-channel-type=${ch.type}" name="type">
                                                    <option value="10">首页</option>
                                                    <option value="20">普通频道</option>
                                                </select><i></i>
                                            </label>
                                        </section>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-primary" id="channel-upadte-btn">
                            保存
                        </button>

                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!-- Modal -->
        <div class="modal fade" id="columnModal" tabindex="-1" role="dialog" aria-labelledby="columnModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="columnModalLabel"><i class="fa fa-edit"></i>编辑栏目顺序</h4>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col col-sm-12 col-md-8 col-lg-4 alert alert-info fade in">
                                <i class="fa-fw fa fa-info"></i>
                                <strong>提醒！</strong> 拖动栏目即可调整顺序
                            </div>
                            <div class="col-md-12 col-lg-8 col-lg-offset-2">
                                <div class="dd" id="columnList">
                                    <ol class="dd-list col-seq-list">
                                        <li th:each="column:${ch.columns}" class="dd-item col-seq-item"
                                            th:attr="data-col-id=${column.column_id}">
                                            <div class="dd-handle">
                                                <label th:text="${column.column_id}"></label>
                                                <label th:text="' - '+${column.title}"></label>
                                            </div>
                                        </li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-primary" id="sequence-save-btn">
                            保存
                        </button>

                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->


        <!-- Modal -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="addModalLabel"><i class="fa fa-edit"></i>添加栏目</h4>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col col-sm-12 col-md-8 col-lg-12 alert alert-info fade in">
                                <i class="fa-fw fa fa-info"></i>
                                <strong>提醒！</strong> 不要使用已存在的栏目名称
                            </div>
                            <div class="col-md-12 col-lg-8 col-lg-offset-2">
                                <form class="smart-form" id="appendForm">
                                    <div class="row">
                                        <section class="col col-6">
                                            <label class="label font-lg">名称：</label>
                                            <input class="text font-md" name="title"/>
                                        </section>
                                        <section class="col col-6">
                                            <label class="label font-lg">栏目类型：</label>
                                            <label class="select">
                                                <select class="select" name="type">
                                                    <option value="10">普通栏目</option>
                                                </select><i></i>
                                            </label>
                                        </section>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-primary" id="column-save-btn">
                            保存
                        </button>

                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

    </div>
    <!-- END MAIN CONTENT -->

</div>
<!-- END MAIN PANEL -->

<!-- PAGE FOOTER -->
<div class="page-footer">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <span class="txt-color-white">新闻后台管理</span>
        </div>

    </div>
</div>
<!-- END PAGE FOOTER -->


<!--================================================== -->

<script src="../../static/js/libs/jquery-2.1.1.min.js"
        th:src="@{/resources/js/libs/jquery-2.1.1.min.js}"></script>

<script src="../../static/js/libs/jquery-ui-1.10.3.min.js"
        th:src="@{/resources/js/libs/jquery-ui-1.10.3.min.js}"></script>

<!-- IMPORTANT: APP CONFIG -->
<script src="../../static/js/app.config.js"
        th:src="@{/resources/js/app.config.js}"></script>

<!-- BOOTSTRAP JS -->
<script src="../../static/js/bootstrap/bootstrap.min.js"
        th:src="@{/resources/js/bootstrap/bootstrap.min.js}"></script>

<!-- JARVIS WIDGETS -->
<script src="../../static/js/smartwidgets/jarvis.widget.min.js"
        th:src="@{/resources/js/smartwidgets/jarvis.widget.min.js}"></script>

<!-- JQUERY VALIDATE -->
<script src="../../static/js/plugin/jquery-validate/jquery.validate.min.js"
        th:src="@{/resources/js/plugin/jquery-validate/jquery.validate.min.js}"></script>

<!-- JQUERY MASKED INPUT -->
<script src="../../static/js/plugin/masked-input/jquery.maskedinput.min.js"
        th:src="@{/resources/js/plugin/masked-input/jquery.maskedinput.min.js}"></script>

<!-- JQUERY SELECT2 INPUT -->
<script src="../../static/js/plugin/select2/select2.min.js"
        th:src="@{/resources/js/plugin/select2/select2.min.js}"></script>

<!--[if IE 8]>

<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

<![endif]-->

<!-- MAIN APP JS FILE -->
<script src="../../static/js/app.min.js" th:src="@{/resources/js/app.min.js}"></script>
<script src="../../static/js/plugin/jquery-nestable/jquery.nestable.min.js"
        th:src="@{/resources/js/plugin/jquery-nestable/jquery.nestable.min.js}"></script>


<script th:inline="javascript">
    /*<![CDATA[*/

    $channel_id = 0;
    /*[+
     $channel_id = [[${ch.channel_id}]];
     +]*/

    function checkAllRows() {
        var if_checked = document.getElementById("check_all").checked;
        var boxs = document.getElementsByName("check_single_row");
        for (var i = 0; i < boxs.length; i++) {
            boxs[i].checked = if_checked;
        }
    }

    function cancelCheckAllStatus() {

        var boxs = document.getElementsByName("check_single_row");
        var flag = true;
        for (var i = 0; i < boxs.length; i++) {
            if (boxs[i].checked == false) {
                flag = false;
                break;
            }
        }
        document.getElementById("check_all").checked = flag;
    }

    // DO NOT REMOVE : GLOBAL FUNCTIONS!
    $(document).ready(function () {

        pageSetUp();

        $('#select_type').val($('#select_type').data("channel-type"));

        $(".channelLi").click(function () {
            var url = /*[[@{/channel/toEdit}]]*/"";
            var channel_id = $(this).data("channel-id");
            window.location.href = url + "?channel_id=" + channel_id;
        });

        var updateOutput = function (dataList) {
            var list = dataList.length ? dataList : $(dataList.target), output = list.data('output');
            if (window.JSON) {
                output.val(window.JSON.stringify(list));
                //, null, 2));
            } else {
                output.val('JSON browser support required.');
            }
        };

        $('#columnList').nestable({
            group: 1
        }).on('change', updateOutput);

        // output initial serialised data
        updateOutput($('#columnList').data('output', $('#columnList-output')));

        $(".columnLi").click(function () {
            var column_id = $(this).data("column-id");
            var channel_id = $(this).data("channel-id");
            var url = $(this).data("column-url");
            window.location.href = url + "?channel_id=" + channel_id + "&column_id=" + column_id;
        }); // end click func

        $("#delete_btn").click(function () {
            var url = /*[[@{/column/delete}]]*/"";
            var checked_ids = "";
            $("[name='check_single_row']:checked").each(function () {
                checked_ids += "," + $(this).val();
            });

            if (checked_ids.length == 0) {
                alert("您还没有选中要删除的项目");
                return;
            } else {
                checked_ids = checked_ids.substring(1);
            }

            var result = window.confirm("确认删除选中的项目?");
            if (result == false) {
                return;
            }

            $.post(url, {deleteIds: checked_ids}, function (data) {
                if (data.code == 1) {
                    var ids = data.ids;
                    for (var i in ids) {
                        $("#col" + ids[i]).remove();
                    }
                }
            }); // end post
        }); // end click func

        $("#refresh_btn").click(function () {

            location.reload();
        }); // end click func

        $(".edit-col-btn").click(function () {
            var column_id = $(this).data("column-id");
            var url;
            /*[+
             url = [[@{/column/setting}]];
             +]*/
            window.location.href = url + "?column_id=" + column_id;
        }); // end click func

        $("#sequence-save-btn").click(function () {
            var url = /*[[@{/column/sequence/update}]]*/"";
            var col_ids = "";
            $(".col-seq-item").each(function () {
                col_ids += "," + $(this).data('col-id');
            });
            col_ids = col_ids.substring(1);

            $.post(url, {colIds: col_ids, channel_id: $channel_id}, function (data) {
                        location.reload();
                    })
                    .fail(function () {
                        alert("保存失败，请重试！")
                    }); // end post
        }); // end click func

        // 
        $('#channel-upadte-btn').click(function () {
            var formData = new FormData(document.getElementById("editForm"));
            var url;

            /*[+
             url = [[@{/channel/update}]];
             +]*/

            formData.append("channel_id", $channel_id);

            $.ajax({
                url: url,
                contentType: false,
                processData: false,
                data: formData,
                type: "POST",
                success: function (data) {
                    alert("保存成功!");
                    location.reload();
                    return false;
                },
                error: function () {
                    alert("保存失败!");
                    return false;
                }

            }); // end ajax
        }); // end click func

//        保存新栏目的动作
        $("#column-save-btn").click(function () {

            var formData = new FormData(document.getElementById("appendForm"));
            var url;

            /*[+
             url = [[@{/column/save}]];
             +]*/

            formData.append("channel_id", $channel_id);

            $.ajax({
                url: url,
                contentType: false,
                processData: false,
                data: formData,
                type: "POST",
                success: function (data) {
                    alert("保存成功!");
                    location.reload();
                    return false;
                },
                error: function () {
                    alert("保存失败!");
                    return false;
                }

            }); // end ajax
        }); // end click func


    });


    /*]]>*/

</script>


</body>

</html>